<template>
  <div>

    <!-- 添加面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
      <el-breadcrumb-item>文件信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 添加卡片视图-->
    <el-card>
      <!-- 定义栅格 -->
      <el-row :gutter="20">
        <!-- 添加输入框-->
        <el-col :span="12">
          <el-input placeholder="按照用户名搜索" v-model="queryUserInfo.query" @clear="getUserList" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 定义表格数据 stripe 隔行变色-->
      <el-table :data="rows" stripe style="width: 100%" border>
        <!-- 添加索引列-->
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="fileName" label="文件名称"></el-table-column>
        <el-table-column prop="department" label="文件所属部门"></el-table-column>
        <el-table-column prop="fileTime" label="文件日期"></el-table-column>
        <el-table-column label="操作" width="180px">
          <!--
            由于操作需要传递用户ID值,所以可以使用作用域插槽的方式实现
            :enterable="false" 鼠标是否可进入到 tooltip中
          -->
          <template slot-scope="scope">
            <!-- 定义三个按钮-->
            <el-tooltip class="item" effect="dark" content="下载" placement="top" :enterable="false">
              <!-- 点击编辑按钮将数据信息传给方法-->
              <el-button type="primary" icon="el-icon-download" size="mini" @click="showUpdateDialogVisible(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 定义分页操作
        handleSizeChange    条数改变时触发
        handleCurrentChange 页数改变时触发
        current-page        绑定当前页数
        page-sizes          表示分页条数选项
        page-size           每页多少条
        layout              显示组件个数
        total               总记录数

      -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryUserInfo.pageNum" :page-sizes="[20, 40]" :page-size="queryUserInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

    </el-card>

    <!-- 定义新增对话框 -->
  </div>
</template>

<script>
  export default {
    //定义钩子函数 created
    created() {
      //默认条件下初始化列表数据
      this.getUserList()
    },
    data() {

      //校验邮箱规则
      const checkEmail = (rule, value, callback) => {
        //定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束
        const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
        if (emailRege.test(value)) {
          //表示邮箱合法 正确返回
          return callback()
        }
        callback(new Error('请填写正确的邮箱地址'))
      }

      //校验手机号的邮箱规则
      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[34578][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

      }

      //校验用户密码是否一致
      const checkPassword = (rule, value, callback) => {
        if (this.addUserModel.password2 !== '') {
          if (value !== this.addUserModel.password2)
            callback(new Error('两次输入的密码不一致'))
        }
        callback()
      }

      const checkPassword2 = (rule, value, callback) => {
        if (value === this.addUserModel.password) return callback()
        callback(new Error('两次输入的密码不一致'))
      }




      return {
        //定义提交参数对象
        queryUserInfo: {
          query: '', //定义查询参数
          pageNum: 1,
          pageSize: 20
        },
        //获取记录总数
        total: 0,
        //获取当前页数据
        rows: [],
        //定义新增对话框状态
        addUserDialogVisible: false,
        //定义修改对话框状态
        updateDialogVisible: false,

        setRoledialogVisible: false,

        //定义添加角色的用户对象
        roleUserInfo: {},
        roleList: [],
        roleId: ''

      }
    },
    methods: {
      async getUserList() {
        const {
          data: result
        } = await this.$http.get('/file/list', {
          params: this.queryUserInfo
        })
        if (result.status !== 200) return this.$message.error('查询文件 失败');
        this.total = result.data.total;
        this.rows = result.data.rows;
      },
      //条数改变触发事件
      handleSizeChange(size) {
        //进行分页操作
        this.queryUserInfo.pageSize = size
        this.getUserList();
      },
      //页面改变触发事件
      handleCurrentChange(current) {
        this.queryUserInfo.pageNum = current
        this.getUserList();
      },

      //定义修改方法
      async showUpdateDialogVisible(row) {
        this.updateDialogVisible = true;
        //动态获取想要的数据
        //this.addUserModel = row;
        let id = row.id
        //方式1: 根据ID发起Ajax请求 获取用户信息  通过params参数获取数据
        let {
          data: result
        } = await this.$http.get('/file/getUserById', {
          params: {
            'id': id
          }
        })
        if (result.status !== 200) return this.$message.error('查询用户失败')
        this.updateUserModel = result.data
        console.log(this.updateUserModel)
        //方法2: 根据已有数据从页面中获取用户信息
      },
      deleteUser(id) {
        this.$confirm('删除ID为 ' + id + ' 的文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {

          //发起ajax请求实现删除操作
          const {
            data: result
          } = await this.$http.delete(`/file/delete/${id}`, {
            "params": {
              "id": id
            }
          })
          if (result.status !== 200) return this.$message.error("删除文件失败")
          this.$message.success("删除数据成功")
          this.getUserList()
        }).catch(() => {
          this.$message.info("取消删除操作")
        })
      },
    }
  }
</script>

<style lang="less" scoped>

</style>
